<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="javascript:;">优惠券</a></el-breadcrumb-item>
         <el-breadcrumb-item>优惠券列表</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-row>
         <el-col :span="15">
            <router-link to="/shop/tickets/create">
               <el-button type="primary" size="mini">
                  <i class="el-icon-plus"></i><span>新增</span>
               </el-button>
            </router-link>
         </el-col>

         <el-col :span="5">
            <div>
               <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" size="mini">
                  <el-select v-model="cate" slot="prepend" placeholder="请选择">
                     <el-option label="ID" value="id"></el-option>
                     <el-option label="名称" value="title"></el-option>
                  </el-select>
                  <el-button slot="append" @click="handleSearch" icon="el-icon-search"></el-button>
               </el-input>
            </div>
         </el-col>
      </el-row>

      <el-table :data="tickets" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
         <el-table-column label="ID" prop="id" width="90"></el-table-column>
         <el-table-column label="名称" prop="title"></el-table-column>
         <el-table-column label="缩略图" prop="image">
            <template slot-scope="scope">
               <img v-if="scope.row.image" :src="scope.row.image" alt="" @click="handleShow(scope.$index,scope.row)"
                    class="image">
            </template>
         </el-table-column>
         <el-table-column label="使用范围" prop="used">
            <template slot-scope="scope">
               <el-tag size="mini">{{used[scope.row.used]}}</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="使用类型" prop="type">
            <template slot-scope="scope">
               <el-tag type="success" size="mini">{{type[scope.row.type]}}</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="满额" prop="with_amount" width="80"></el-table-column>
         <el-table-column label="用券金额" prop="used_amount" width="60"></el-table-column>
         <el-table-column label="发券数量" prop="number" width="60"></el-table-column>
         <el-table-column label="领取数量" prop="take_count" width="60"></el-table-column>
         <el-table-column label="使用数量" prop="used_count" width="60"></el-table-column>
         <!--         <el-table-column label="发放时间" prop="start_time"></el-table-column>-->
         <!--         <el-table-column label="结束时间" prop="end_time"></el-table-column>-->
         <!--         <el-table-column label="时效" prop="valid_type"></el-table-column>-->
         <el-table-column label="使用时间" prop="valid_start_time" width="105"></el-table-column>
         <el-table-column label="结束时间" prop="valid_end_time" width="105"></el-table-column>
         <el-table-column label="有效期" prop="valid_days" width="50">
            <template slot-scope="scope" v-if="scope.row">{{scope.row.valid_days}}天</template>
         </el-table-column>
         <el-table-column label="状态" prop="status" width="60">
            <template slot-scope="scope">
               <el-tag :type="tag_type[scope.row.status]" size="mini">{{status[scope.row.status]}}</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="排序" prop="sort_order" width="150">
            <template slot-scope="scope">
               <el-input-number v-model="scope.row.sort_order" :min="1" :max="999" size="mini"
                                @change="handleChange(scope.row.id,scope.row.sort_order)"></el-input-number>
            </template>
         </el-table-column>
         <el-table-column label="创建者" prop="create_user"></el-table-column>
         <el-table-column label="创建时间" prop="created_at" width="105"></el-table-column>
         <el-table-column label="更新者" prop="update_user"></el-table-column>
         <el-table-column label="更新时间" prop="updated_at" width="105"></el-table-column>
         <el-table-column label="操作" width="70">
            <template slot-scope="scope">
               <router-link :to="{name:'tickets_edit',params: { id: scope.row.id }}">
                  <i class="el-icon-edit-outline"></i>
               </router-link>
               <i class="el-icon-delete" @click="handleDelete(scope.$index,scope.row)"></i>
            </template>
         </el-table-column>
      </el-table>

      <!--分页-->
      <div class="page">
         <span class="total">共 {{page.total}} 条数据</span>
         <el-pagination background :total="page.total" :page-size="page.size" @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage" layout="prev, pager, next">
         </el-pagination>
      </div>

      <!--查看大图-->
      <el-dialog :visible.sync="showImg" :width="width" custom-class="an-img-dialog" :center="true">
         <img :src="ticket.image" alt="" @load="onLoad">
      </el-dialog>
   </div>
</template>

<script>
   export default {
      name: "Home",
      data() {
         return {
            loading: false,
            showImg: false,
            width: '',
            keyword: '',
            cate: '',
            tickets: [],
            ticket: {
               image: '',
            },
            used: [],
            type: [],
            tag_type: ['success', 'warning', 'danger'],
            status: [],
            page: {
               total: 0,  //总数
               size: 0,  //每页显示数
               currentPage: 1,
            },
         }
      },
      created() {
         this.init();
      },
      methods: {
         onLoad(e) {
            const img = e.target;
            let width = 0;
            if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
               width = img.width + 40;
            }
            this.width = width + 'px';
         },
         //搜索
         handleSearch() {
            this.init();
         },
         //分页--获取当前页
         handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page.currentPage = val;
            this.init();
         },
         //查看大图
         handleShow(index, row) {
            this.ticket.image = row.image;
            this.showImg = true;
         },
         //首页
         init() {
            this.loading = true;
            axios.get(`/admin/shop/tickets?page=${this.page.currentPage}&cate=${this.cate}&keyword=${this.keyword}`)
               .then((res) => {
                  // console.log(res.data);
                  this.tickets = res.data.tickets.data;
                  this.page.total = res.data.tickets.total;
                  this.page.size = res.data.tickets.per_page;
                  this.used = res.data.used;
                  this.type = res.data.type;
                  this.status = res.data.status;
                  this.loading = false;
               })
         },
         //排序
         handleChange(id, sort_order) {
            axios.patch(`/admin/shop/tickets/change_sort`, {id: id, sort_order: sort_order})
               .then((res) => {
                  this.$notify({
                     title: '成功',
                     message: '排序成功！',
                     type: 'success',
                  });
                  this.init();
               })
         },
         //删除
         handleDelete(index, row) {
            this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning',
               center: true
            }).then(() => {
               axios.delete(`/admin/shop/tickets/${row.id}`)
                  .then((res) => {
                     // console.log(res);
                     if (res.data.status == 1) {
                        this.tickets.splice(index, 1);
                        this.$message({
                           type: 'success',
                           message: res.data.msg,
                        });
                        this.init();
                     } else {
                        this.$message.error(res.data.msg);
                     }
                  });
            }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消删除'
               });
            });
         },
      },
   }
</script>

<style>

</style>